<!-- 茶文化页 -->
<template>
  <div class="culture">
    <div class="culture-img">
      <img :src="TeaCulture.img" alt="" />
    </div>
    <div class="culture-size">
      <div class="size" v-for="item in TeaCulture.content" :key="item.id">
        <span class="title">{{ item.title }}</span>
        <p class="intro">{{ item.intro }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getculture } from "@/api/inedx";
export default {
  data() {
    return {
      TeaCulture: [],
    };
  },
  methods: {
    async getTeaCulture() {
      let { data } = await this.$http(getculture());
      this.TeaCulture = data.data;
    },
  },
  mounted() {
    this.getTeaCulture();
  },
};
</script>

<style lang="scss" scoped>
.culture {
  width: 100vw;
  background-color: #fff;
  padding: 0.625rem;
  margin: 0.9375rem 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  .culture-img {
    width: 40vmin;
    img {
      width: 100%;
    }
  }
  .culture-size {
    margin-left: 0.625rem;
    .size {
      margin-bottom: 0.3125rem;
      .title {
        font-size: 16px;
        margin-top: 3px;
        display: inline-block;
      }
      .intro {
        color: #a9a9a9;
        font-size: 14px;
        font-weight: 100;
        padding: 5px 0;
        line-height: 18px;
      }
    }
    .size:nth-of-type(1) {
      border-bottom: 1px solid rgba($color: #a9a9a9, $alpha: 0.5);
    }
  }
}
</style>
